tags: 鐵人賽 React javascript nodejs vscode

鐵人賽第15天，今天要聊聊vscode開發的好工具，讓各位開發的時間縮短，省下的時間好好陪家人。

前言

• 我們在開發React時，難免想要設個中斷點了解一下javascropt的狀態，時代在變，人也要跟著進步，總不能用console.log()十連發搭配Chrome inspector來做debug吧! 如果是的話，加上npm reload網頁的時間，可能bug都還沒de出來，就已經被踢出專案了...XD
• 筆者過去在vscode上開發python，很喜歡用debug工具，讓我可以在vscode內建的debug console下指令，確認變數是否有誤。
• 轉來寫前端後，跟各位一樣用了一堆console.log，開發的過程感覺處在漫漫長路，剛做專案時，每天學小飛俠Kobe四點起床，就是擔心會延誤專案進度，直到我發現了 JavaScript Debugger工具，多睡兩小時不再是難事。

VSCODE+JavaScript Debugger 就是救世主

• JavaScript Debugger (Nightly)官網
• 別懷疑，這套工具就是這麼神奇，不囉唆，立馬跟著步驟來感受一下。

安裝步驟

• 我們以day14的範例來做個說明，或者，你可以用create-react-app重新建立一個React專案

• 開啟vscode點選左方的，搜尋JavaScript Debugger，看到後，立馬點install
  

• 接著，看到vscode左方的蟲子沒，點下去後，會看到如下的畫面
  

• 點選create a launch.json file，並選Chrome(preview)
  

• 產生的launch.json檔，用來連結VSCODE與Chrome，讓他們彼此之間可以做資訊的傳遞與溝通。

• 由於create-react-app預設的port:3000，因此我們需要修改一下launch.json，並按下save

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000", //<--這裡改3000
            "webRoot": "${workspaceFolder}"
        }
    ]
}

• npm start啟動React專案(注意：一定要先啟動，很多人忽略這個步驟，)

• 開啟Chrome瀏覽器，等待畫面出現
  

• 開啟ShowDiffText.js，我們想觀察第9行 的狀態，到數字旁邊點出小紅點
  

• 按下F5後，系統會自動帶出另一個Chrome瀏覽器，這個新的瀏覽器正式與VSCODE勾住，理所當然，我們要 對第二個瀏覽器做操作。

• 按下Button A，來瞧瞧發生什麼事!
  

• 喔喔！中斷點成功啦!
  

• 來點進階的，到底下Tab標籤選 DEBUG CONSOLE，並在此 畫面最下方輸入變數state，喔喔喔～直接印出變數的答案，帥呆啦！

• 善用這幾個功能，讓你分天遁地般的悠遊程式碼中
  

結論

• 今天介紹Javascript Debug工具，絕對是你React旅途中，不可或缺的利器！善用它，你也會是時間管理大師。
• 鐵人賽第15天，雖然忙到下班前，但我依舊沒有放棄，都走了一半了豈有放棄的理由！衝啊~~~~